<!--

    Copyright © 2016-2024 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div fxLayout="column" class="command-form" [formGroup]="commandForm">
  <div
    class="mat-subtitle-1 title">{{ 'gateway.rpc.title' | translate: {type: gatewayConnectorDefaultTypesTranslates.get(connectorType)} }}</div>
  <ng-template [ngIf]="connectorType">
    <ng-container [ngSwitch]="connectorType">
      <ng-template [ngSwitchCase]="ConnectorType.MQTT">
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label>
          <input matInput formControlName="methodFilter"
                 placeholder="echo"/>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.requestTopicExpression' | translate }}</mat-label>
          <input matInput formControlName="requestTopicExpression"
                 placeholder="sensor/${deviceName}/request/${methodName}/${requestId}"/>
        </mat-form-field>
        <mat-slide-toggle class="margin" (click)="$event.stopPropagation()" formControlName="withResponse">
          {{ 'gateway.rpc.withResponse' | translate }}
        </mat-slide-toggle>
        <mat-form-field *ngIf="commandForm.get('withResponse')?.value">
          <mat-label>{{ 'gateway.rpc.responseTopicExpression' | translate }}</mat-label>
          <input matInput formControlName="responseTopicExpression"
                 placeholder="sensor/${deviceName}/response/${methodName}/${requestId}"/>
        </mat-form-field>
        <mat-form-field *ngIf="commandForm.get('withResponse')?.value">
          <mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label>
          <input matInput formControlName="responseTimeout" type="number"
                 placeholder="10000" min="10" step="1"/>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
          <input matInput formControlName="valueExpression"
                 placeholder="${params}"/>
        </mat-form-field>
      </ng-template>
      <ng-template [ngSwitchCase]="ConnectorType.BACNET">
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
          <input matInput formControlName="method" placeholder="set_state"/>
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label>{{ 'gateway.rpc.requestType' | translate }}</mat-label>
          <mat-select formControlName="requestType">
            <mat-option *ngFor="let type of bACnetRequestTypes" [value]="type">
              {{bACnetRequestTypesTranslates.get(type) | translate}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.requestTimeout' | translate }}</mat-label>
          <input matInput formControlName="requestTimeout" type="number"
                 min="10" step="1" placeholder="1000"/>
        </mat-form-field>
        <div fxFlex fxLayout="row" fxLayoutGap="10px">
          <mat-form-field fxFlex="50" class="mat-block">
            <mat-label>{{ 'gateway.rpc.objectType' | translate }}</mat-label>
            <mat-select formControlName="objectType">
              <mat-option *ngFor="let type of bACnetObjectTypes" [value]="type">
                {{bACnetObjectTypesTranslates.get(type) | translate}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field fxFlex="50">
            <mat-label>{{ 'gateway.rpc.identifier' | translate }}</mat-label>
            <input matInput formControlName="identifier" type="number"
                   min="1" step="1" placeholder="1"/>
          </mat-form-field>
        </div>
        <mat-form-field class="mat-block">
          <mat-label>{{ 'gateway.rpc.propertyId' | translate }}</mat-label>
          <input matInput formControlName="propertyId" placeholder="presentValue"/>
        </mat-form-field>
      </ng-template>
      <ng-template [ngSwitchCase]="ConnectorType.BLE">
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
          <input matInput formControlName="methodRPC" placeholder="rpcMethod1"/>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.characteristicUUID' | translate }}</mat-label>
          <input matInput formControlName="characteristicUUID" placeholder="00002A00-0000-1000-8000-00805F9B34FB"/>
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label>{{ 'gateway.rpc.methodProcessing' | translate }}</mat-label>
          <mat-select formControlName="methodProcessing">
            <mat-option *ngFor="let type of bLEMethods" [value]="type">
              {{bLEMethodsTranslates.get(type) | translate}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-slide-toggle class="mat-slide" formControlName="withResponse">
          {{ 'gateway.rpc.withResponse' | translate }}
        </mat-slide-toggle>
      </ng-template>
      <ng-template [ngSwitchCase]="ConnectorType.CAN">
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
          <input matInput formControlName="method" placeholder="sendSameData"/>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.nodeID' | translate }}</mat-label>
          <input matInput formControlName="nodeID" type="number" placeholder="4" min="0" step="1"/>
        </mat-form-field>
        <mat-slide-toggle class="mat-slide margin" formControlName="isExtendedID">
          {{ 'gateway.rpc.isExtendedID' | translate }}
        </mat-slide-toggle>
        <mat-slide-toggle class="mat-slide margin" formControlName="isFD">
          {{ 'gateway.rpc.isFD' | translate }}
        </mat-slide-toggle>
        <mat-slide-toggle class="mat-slide margin" formControlName="bitrateSwitch">
          {{ 'gateway.rpc.bitrateSwitch' | translate }}
        </mat-slide-toggle>
        <div fxFlex fxLayout="row" fxLayoutGap="10px">
          <mat-form-field fxFlex="50">
            <mat-label>{{ 'gateway.rpc.dataLength' | translate }}</mat-label>
            <input matInput formControlName="dataLength" type="number" placeholder="2" min="1" step="1"/>
          </mat-form-field>
          <mat-form-field class="mat-block" fxFlex="50">
            <mat-label>{{ 'gateway.rpc.dataByteorder' | translate }}</mat-label>
            <mat-select formControlName="dataByteorder">
              <mat-option *ngFor="let order of cANByteOrders" [value]="order">
                {{ order | translate }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div fxFlex fxLayout="row" fxLayoutGap="10px">
          <mat-form-field fxFlex="50">
            <mat-label>{{ 'gateway.rpc.dataBefore' | translate }}</mat-label>
            <input matInput formControlName="dataBefore" placeholder="00AA"/>
          </mat-form-field>
          <mat-form-field fxFlex="50">
            <mat-label>{{ 'gateway.rpc.dataAfter' | translate }}</mat-label>
            <input matInput formControlName="dataAfter" placeholder="0102"/>
          </mat-form-field>
        </div>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.dataInHEX' | translate }}</mat-label>
          <input matInput formControlName="dataInHEX"
                 placeholder="aa bb cc dd ee ff   aa bb aa bb cc d ee ff"/>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.dataExpression' | translate }}</mat-label>
          <input matInput formControlName="dataExpression"
                 placeholder="userSpeed if maxAllowedSpeed > userSpeed else maxAllowedSpeed"/>
        </mat-form-field>
      </ng-template>
      <ng-template [ngSwitchCase]="ConnectorType.FTP">
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label>
          <input matInput formControlName="methodFilter" placeholder="read"/>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
          <input matInput formControlName="valueExpression" placeholder="${params}"/>
        </mat-form-field>
      </ng-template>
      <ng-template [ngSwitchCase]="ConnectorType.OCPP">
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
          <input matInput formControlName="methodRPC" placeholder="rpc1"/>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
          <input matInput formControlName="valueExpression" placeholder="${params}"/>
        </mat-form-field>
        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">
          {{ 'gateway.rpc.withResponse' | translate }}
        </mat-slide-toggle>
      </ng-template>
      <ng-template [ngSwitchCase]="ConnectorType.SOCKET">
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
          <input matInput formControlName="methodRPC" placeholder="rpcMethod1"/>
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label>{{ 'gateway.rpc.methodProcessing' | translate }}</mat-label>
          <mat-select formControlName="methodProcessing">
            <mat-option *ngFor="let method of socketMethodProcessings" [value]="method">
              {{ SocketMethodProcessingsTranslates.get(method) | translate }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label>{{ 'gateway.rpc.encoding' | translate }}</mat-label>
          <input matInput formControlName="encoding" placeholder="{{socketEncodings[0]}}"/>
        </mat-form-field>
        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">
          {{ 'gateway.rpc.withResponse' | translate }}
        </mat-slide-toggle>
      </ng-template>
      <ng-template [ngSwitchCase]="ConnectorType.XMPP">
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
          <input matInput formControlName="methodRPC" placeholder="rpc1"/>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
          <input matInput formControlName="valueExpression" placeholder="${params}"/>
        </mat-form-field>
        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">
          {{ 'gateway.rpc.withResponse' | translate }}
        </mat-slide-toggle>
      </ng-template>
      <ng-template [ngSwitchCase]="ConnectorType.SNMP">
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.requestFilter' | translate }}</mat-label>
          <input matInput formControlName="requestFilter" placeholder="setData"/>
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label>{{ 'gateway.rpc.method' | translate }}</mat-label>
          <mat-select formControlName="method">
            <mat-option *ngFor="let method of sNMPMethods" [value]="method">
              {{ SNMPMethodsTranslations.get(method) | translate }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">
          {{ 'gateway.rpc.withResponse' | translate }}
        </mat-slide-toggle>
        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="oid">
          <span class="fields-label">{{ 'gateway.rpc.oids' | translate }}*</span>
          <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
               *ngFor="let control of getFormArrayControls('oid'); let i = index">
            <mat-form-field class="tb-inline-field" appearance="outline" fxFlex subscriptSizing="dynamic">
              <input matInput [formControl]="control" required/>
            </mat-form-field>
            <mat-icon style="cursor:pointer;"
                      fxFlex="30px"
                      (click)="removeSNMPoid(i)"
                      matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
            </mat-icon>
          </div>
          <button mat-raised-button
                  fxFlexAlign="start"
                  (click)="addSNMPoid()">
            {{ 'gateway.rpc.add-oid' | translate }}
          </button>
        </fieldset>
      </ng-template>
      <ng-template [ngSwitchCase]="ConnectorType.REST">
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label>
          <input matInput formControlName="methodFilter" placeholder="post_attributes"/>
        </mat-form-field>
        <div fxFlex fxLayout="row" fxLayoutGap="10px">
          <mat-form-field class="mat-block" fxFlex="33">
            <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
            <mat-select formControlName="httpMethod">
              <mat-option *ngFor="let method of hTTPMethods" [value]="method">
                {{ method }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field fxFlex>
            <mat-label>{{ 'gateway.rpc.requestUrlExpression' | translate }}</mat-label>
            <input matInput formControlName="requestUrlExpression"
                   placeholder="http://127.0.0.1:5000/my_devices"/>
          </mat-form-field>
        </div>
        <div fxFlex fxLayout="row" fxLayoutGap="10px">
          <mat-form-field fxFlex="33">
            <mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label>
            <input matInput formControlName="responseTimeout" type="number"
                   step="1" min="10" placeholder="10"/>
          </mat-form-field>
          <mat-form-field fxFlex>
            <mat-label>{{ 'gateway.rpc.timeout' | translate }}</mat-label>
            <input matInput formControlName="timeout" type="number"
                   step="1" min="10" placeholder="1000"/>
          </mat-form-field>
          <mat-form-field fxFlex>
            <mat-label>{{ 'gateway.rpc.tries' | translate }}</mat-label>
            <input matInput formControlName="tries" type="number"
                   step="1" min="1" placeholder="3"/>
          </mat-form-field>
        </div>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
          <input matInput formControlName="valueExpression" placeholder="${params}"/>
        </mat-form-field>
        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders">
          <span class="fields-label">{{ 'gateway.rpc.httpHeaders' | translate }}</span>
          <div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls('httpHeaders').length">
            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
              <span fxFlex class="title">{{ 'gateway.rpc.header-name' | translate }}</span>
              <span fxFlex class="title">{{ 'gateway.rpc.value' | translate }}</span>
              <span fxFlex="30px"></span>
            </div>
            <mat-divider></mat-divider>
            <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
                 *ngFor="let control of getFormArrayControls('httpHeaders'); let i = index">
              <ng-container [formGroupName]="i">
                <mat-form-field appearance="outline" fxFlex>
                  <input matInput formControlName="headerName"/>
                </mat-form-field>
                <mat-form-field appearance="outline" fxFlex>
                  <input matInput formControlName="value" placeholder="application/json"/>
                </mat-form-field>
                <mat-icon style="cursor:pointer;"
                          fxFlex="30px"
                          (click)="removeHTTPHeader(i)"
                          matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
                </mat-icon>
              </ng-container>
            </div>
          </div>
          <button mat-raised-button
                  fxFlexAlign="start"
                  (click)="addHTTPHeader()">
            {{ 'gateway.rpc.add-header' | translate }}
          </button>
        </fieldset>
        <tb-rest-connector-security [formControl]="commandForm.get('security')"></tb-rest-connector-security>
      </ng-template>
      <ng-template [ngSwitchCase]="ConnectorType.REQUEST">
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label>
          <input matInput formControlName="methodFilter" placeholder="echo"/>
        </mat-form-field>
        <div fxFlex fxLayout="row" fxLayoutGap="10px">
          <mat-form-field class="mat-block" fxFlex="33">
            <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
            <mat-select formControlName="httpMethod">
              <mat-option *ngFor="let method of hTTPMethods" [value]="method">
                {{ method }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field fxFlex>
            <mat-label>{{ 'gateway.rpc.requestUrlExpression' | translate }}</mat-label>
            <input matInput formControlName="requestUrlExpression" placeholder="http://127.0.0.1:5000/my_devices"/>
          </mat-form-field>
        </div>
        <div fxFlex fxLayout="row" fxLayoutGap="10px">
          <mat-form-field fxFlex="33">
            <mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label>
            <input matInput formControlName="responseTimeout" type="number"
                   step="1" min="10" placeholder="10"/>
          </mat-form-field>
          <mat-form-field fxFlex>
            <mat-label>{{ 'gateway.rpc.timeout' | translate }}</mat-label>
            <input matInput formControlName="timeout" type="number"
                   step="1" min="10" placeholder="10"/>
          </mat-form-field>
          <mat-form-field fxFlex>
            <mat-label>{{ 'gateway.rpc.tries' | translate }}</mat-label>
            <input matInput formControlName="tries" type="number"
                   step="1" min="1" placeholder="1"/>
          </mat-form-field>
        </div>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.requestValueExpression' | translate }}</mat-label>
          <input matInput formControlName="requestValueExpression" placeholder="${params}"/>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{ 'gateway.rpc.responseValueExpression' | translate }}</mat-label>
          <input matInput formControlName="responseValueExpression" placeholder="${temp}"/>
        </mat-form-field>
        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders">
          <span class="fields-label">{{ 'gateway.rpc.httpHeaders' | translate }}</span>
          <div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls('httpHeaders').length">
            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
              <span fxFlex class="title">{{ 'gateway.rpc.header-name' | translate }}</span>
              <span fxFlex class="title">{{ 'gateway.rpc.value' | translate }}</span>
              <span fxFlex="30px"></span>
            </div>
            <mat-divider></mat-divider>
            <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
                 *ngFor="let control of getFormArrayControls('httpHeaders'); let i = index">
              <ng-container [formGroupName]="i">
                <mat-form-field appearance="outline" fxFlex>
                  <input matInput formControlName="headerName" placeholder="{{ 'gateway.rpc.set' | translate }}"/>
                </mat-form-field>
                <mat-form-field appearance="outline" fxFlex>
                  <input matInput formControlName="value"/>
                </mat-form-field>
                <mat-icon style="cursor:pointer;"
                          fxFlex="30px"
                          (click)="removeHTTPHeader(i)"
                          matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
                </mat-icon>
              </ng-container>
            </div>
          </div>
          <button mat-raised-button
                  fxFlexAlign="start"
                  (click)="addHTTPHeader()">
            {{ 'gateway.rpc.add-header' | translate }}
          </button>
        </fieldset>
      </ng-template>
      <ng-template [ngSwitchCase]="ConnectorType.OPCUA" #OPCUAForm>
        <mat-form-field >
          <mat-label>{{ 'gateway.rpc.method' | translate }}</mat-label>
          <input matInput formControlName="method" placeholder="multiply"/>
        </mat-form-field>
        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="arguments">
          <span class="fields-label">{{ 'gateway.rpc.arguments' | translate }}</span>
          <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
               *ngFor="let control of getFormArrayControls('arguments'); let i = index">
            <mat-form-field appearance="outline" fxFlex>
              <input matInput [formControl]="control" required/>
            </mat-form-field>
            <mat-icon style="cursor:pointer;"
                      fxFlex="30px"
                      (click)="removeOCPUAArguments(i)"
                      matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
            </mat-icon>
          </div>
          <button mat-raised-button
                  fxFlexAlign="start"
                  (click)="addOCPUAArguments()">
            {{ 'gateway.rpc.add-argument' | translate }}
          </button>
        </fieldset>
      </ng-template>
      <ng-template ngSwitchDefault>
        <mat-form-field>
          <mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label>
          <input matInput formControlName="command"/>
        </mat-form-field>
        <mat-form-field fxFlex>
          <mat-label>{{ 'widget-config.datasource-parameters' | translate }}</mat-label>
          <input matInput formControlName="params" type="JSON" tb-json-to-string/>
          <mat-icon class="material-icons-outlined" aria-hidden="false" aria-label="help-icon"
                    matIconSuffix style="cursor:pointer;"
                    (click)="openEditJSONDialog($event)"
                    matTooltip="{{ 'gateway.rpc-command-edit-params' | translate }}">edit
          </mat-icon>
          <mat-error *ngIf="commandForm.get('params').hasError('invalidJSON')">
            {{ 'gateway.rpc.json-value-invalid' | translate }}
          </mat-error>
        </mat-form-field>
      </ng-template>
    </ng-container>
  </ng-template>
  <div class="template-actions" fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">
    <button mat-raised-button
            (click)="save()"
            [disabled]="commandForm.invalid">
      {{ 'gateway.rpc-command-save-template' | translate }}
    </button>
    <button mat-raised-button
            color="primary"
            (click)="sendCommand.emit()"
            [disabled]="commandForm.invalid">
      {{ 'gateway.rpc-command-send' | translate }}
    </button>
  </div>
</div>
